<template>
    <div class="selector" v-focus>
        <Input 
            :placeholder="placeholder" 
            :inputVal="inputVal"
            @searchOptions="searchOptions"
        />
        <Menu 
            :searchVal="searchVal"
            :menuData="menuData"
            @setItemValue="setItemValue" 
        />
    </div>
</template>

<script>
    import focus from './directives/focus'
    import Input from './Input.vue'
    import Menu from './Menu.vue'
    import { reactive, toRefs } from 'vue'
    export default {
        name: 'Selector',
        directives: {
            focus
        },
        props: {
            placeholder: String,
            menuData: Array
        },
        components: {
            Input,
            Menu
        },
        setup(){
            const state = reactive({
                inputVal:'',
                searchVal:''
            })
            const searchOptions = (val) =>{
                state.searchVal = val
            }

            const setItemValue = (item) =>{
                state.inputVal = item.text
            }
            
            return{
                ...toRefs(state),
                searchOptions,
                setItemValue
            }
        }
    }
</script>

<style lang="less" scoped>
    .selector {
        position: relative;
        width: 300px;
    }
</style>